<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<div>
					<span>用户名:</span>
					<span>
						<input name="username" type="text" v-model="username" />
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<input name="gender" type="radio" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="woman" v-model="gender"/>
						<label for="woman">女</label>
					</span>
				</div>
				
				<div>
					<span>爱好:</span>
					<span>
						<input name="hobbys" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
						<input name="hobbys" type="checkbox" value="足球" v-model="hobbys"/>足球
						<input name="hobbys" type="checkbox" value="跑步" v-model="hobbys"/>跑步
					</span>
				</div>
				
				<div>
					<span>部门:</span>
					<span>
						<!-- 设定下拉框多选 -->
						<select name="dept" v-model="dept" multiple="true">
							<option value="财务部">财务部</option>
							<option value="研发部">研发部</option>
							<option value="测试部">测试部</option>
						</select>
					</span>
				</div>
				
				<div>
					<span>用户详情:</span><br />
					<span>
						<textarea name="text" v-model="text" style="width: 350px;height: 140px;"></textarea>
					</span>
				</div>
				
				<div>
					<!-- 让默认的行为失效 -->
					<button @click.prevent="submit">提交</button>
				</div>
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					username:'',
					gender:'男',
					// 如果数据项有多项 则使用数组接收
					hobbys:['敲代码','足球'],
					// 定义下拉框 如果单个数据使用空串 多个数据使用数组
					dept:['财务部','研发部'],
					text:''
				},
				methods:{
					submit(){
						console.log("username数据:"+this.username)
					}
				}
			})
		</script>
	</body>
</html>
